<template>
  <div class="search">
    <div v-for="(item,index) in buttonselectlist " :key="index" :class="index === selectedindex && statuss === false ? 'basebut1':'basebut2'" @click="time(item.name, index)">
      {{ item.Name }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    searchList: {
      type: Object,
      default: () => ({
        startDate: '',
        endDate: '',
        startTime: '',
        endTime: '',
        status: 1
      })
    }
  },
  data() {
    return {
      value: '',
      selectedindex: 0,
      timeId: 0,
      statuss: true,
      buttonselectlist: [
        {
          name: 'day',
          Name: '日'
        },
        {
          name: 'week',
          Name: '周'
        },
        {
          name: 'month',
          Name: '月'
        }
      ]
    }
  },
  watch: {
    searchList: {
      deep: true,
      handler(val) {
        if (val.status === 1) {
          this.statuss = true
          val.status = 0
        }
      }
    }
  },
  methods: {
    // year(val) {
    //   // console.log(val)
    //   this.$emit('year', val)
    // },
    // date(val) {
    //   // console.log(val)
    //   this.$emit('date', val)
    // },
    time(e, i) {
      this.selectedindex = i
      if (i === this.timeId) {
        this.statuss = !this.statuss
      } else {
        this.statuss = false
      }
      this.timeId = i
      if (this.statuss === false) {
        if (e === 'day') {
          this.day(e)
        } else if (e === 'week') {
          this.week(e)
        } else if (e === 'month') {
          this.month(e)
        }
      } else {
        this.$emit('start-date', '')
        this.$emit('end-date', '')
        this.$emit('Date', "month")
      }
    },
    day(e) {
      // 获取当天
      const startday = new Date(new Date(new Date().toLocaleDateString()).getTime());
      const endday = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1);
      // 本日的日期 （起始日期）
      // var startDate = this.transferDate(startday); // 日期变换
      // // 本日的日期 （结束日期）
      // var endDate = this.transferDate(endday); // 日期变换
      // console.log(startDate, endDate)
      // console.log(this.getTimestamp(startday), this.getTimestamp(endday))
      this.$emit('start-date', this.getTimestamp(startday))
      this.$emit('end-date', this.getTimestamp(endday))
      this.$emit('Date', e)
      return this.getTimestamp(startday) + ' - ' + this.getTimestamp(endday);
    },
    // 3.获取本周开始和结束日期
    week(e) {
      // 按周日为一周的最后一天计算
      var dateStart = new Date(new Date(new Date().toLocaleDateString()).getTime());
      // 今天是这周的第几天
      var today = dateStart.getDay();
      // 上周日距离今天的天数（负数表示）
      var stepSunDay = -today + 1;
      // 如果今天是周日
      if (today === 0) {
        stepSunDay = -7;
      }
      // 周一距离今天的天数（负数表示）
      var stepMonday = 7 - today;
      var time = dateStart.getTime();
      // var times = dateEnd.getTime();
      var monday = new Date(time + stepSunDay * 24 * 3600 * 1000);
      var sunday = new Date(time + stepMonday * 24 * 3600 * 1000 + 24 * 60 * 60 * 1000 - 1);
      // 本周一的日期 （起始日期）
      // var startDate = this.transferDate(monday); // 日期变换
      // // 本周日的日期 （结束日期）
      // var endDate = this.transferDate(sunday); // 日期变换
      // console.log(startDate, endDate)
      // console.log(this.getTimestamp(monday), this.getTimestamp(sunday))
      this.$emit('start-date', this.getTimestamp(monday))
      this.$emit('end-date', this.getTimestamp(sunday))
      this.$emit('Date', e)
      return this.getTimestamp(monday) + ' - ' + this.getTimestamp(sunday);
    },

    // 4.获取本月日期
    month(e) {
      // 获取当前月的第一天
      var dateStart = new Date(new Date(new Date().toLocaleDateString()).getTime());
      dateStart.setDate(1);
      // 获取当前月的最后一天
      var dateEnd = new Date();
      var currentMonth = dateEnd.getMonth();
      var nextMonth = ++currentMonth;
      var nextMonthFirstDay = new Date(dateEnd.getFullYear(), nextMonth, 1);
      var oneDay = 1000 * 60 * 60 * 24;
      var end = new Date(nextMonthFirstDay - oneDay + 24 * 60 * 60 * 1000 - 1);
      // var startDate = this.transferDate(dateStart); // 日期变换
      // var endDate = this.transferDate(end); // 日期变换
      // console.log(startDate, endDate)
      // console.log(this.getTimestamp(dateStart), this.getTimestamp(end))
      this.$emit('start-date', this.getTimestamp(dateStart))
      this.$emit('end-date', this.getTimestamp(end))
      this.$emit('Date', e)
      return this.getTimestamp(dateStart) + ' - ' + this.getTimestamp(end);
    },
    getTimestamp(time) { // 把时间日期转成时间戳
      return (time).getTime()
    },
    // 5.日期变换的方法
    transferDate(date) {
      // 年
      var year = date.getFullYear();
      // 月
      var month = date.getMonth() + 1;
      // 日
      var day = date.getDate();

      var getHours = date.getHours()

      var getMinutes = date.getMinutes()

      var getSeconds = date.getSeconds()

      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      if (getHours >= 0 && getHours <= 9) {
        getHours = "0" + getHours;
      }
      if (getMinutes >= 0 && getMinutes <= 9) {
        getMinutes = "0" + getMinutes;
      }
      if (getSeconds >= 0 && getSeconds <= 9) {
        getSeconds = "0" + getSeconds;
      }
      var dateString = year + '/' + month + '/' + day + ' ' + getHours + ':' + getMinutes + ':' + getSeconds;
      return dateString;
    }
  }
}
</script>

<style lang="scss" scoped>
.search{
    width: 250px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 4px;
}
.basebut1 {
    width: 75px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    // background-color: transparent;
    background: url('~@/assets/statistical-report/timeOn.png');
    background-size: 100% 100%;
    font-size: 18px;
    color: #ffffff;
    cursor: pointer;
    margin: 3px 5px;
}
.basebut2 {
    width: 75px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: url('~@/assets/statistical-report/timeOff.png') 100% 100% no-repeat;
    background-size: 100% 100%;
    // border-radius: 15px;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    margin: 3px 5px;
    // padding-left: 10px;
    // padding-right: 10px;
}
</style>
